<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Demo</title>
  </head>
  <body>
    <section>
      <h1>链接——重要的是href 和target属性</h1>
      <a href="http://www.qq.com">腾讯网</a>
      <a href="http://www.taobao.com" target="_blank">淘宝网</a>
    </section>
    <section>
      <h1>表格 border 指定边框宽度</h1>
      <table border="1">
        <thead>
          <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>数据1</td>
            <td>数据2</td>
            <td>数据3</td>
          </tr>
          <tr>
            <td colspan="2">colspan占据多列</td>
            <td>数据3</td>
          </tr>
          <tr>
            <td rowspan="2">rowspan占据多行</td>
            <td>数据2</td>
            <td>数据3</td>
          </tr>
          <tr>
            <td>数据2</td>
            <td>数据3</td>
          </tr>
        </tbody>
      </table>
    </section>
    <section>
      <h1>表单</h1>
      <ul>
        <li>method:指定提交方式</li>
        <li>action：提交地址</li>
        <li>enctype:表单提交方式</li>
      </ul>
      <form
        method="GET"
        action="http://www.qq.com"
        enctype="application/x-www-form-urlencoded"
      >
        <p>
          <select name="select1">
            <option value="1">一</option>
            <option value="2" selected>selected默认选中状态</option>
          </select>
        </p>
        <p>
          <input type="text" name="text1" />
        </p>
        <p>
          <input type="password" name="password" />
        </p>
        <p>
          <ul>
            <li>label标记上的for属性将该标签与表单控件<b>id[id是唯一的]</b>显式关联，增强表单可读性。</li>
            <li>单选框通过name 来判断是否一个组的</li>
            <li>checked:默认选中状态</li>
          </ul>
          <input type="radio" name="radio1" id="radio1-1" checked/>
          <label>选项一</label>
          <input type="radio" name="radio1" id="radio1-2" />
          <label for="radio1-2">选项二</label>
        </p>
        <p>
          <button type="button">普通按钮</button>
          <button type="submit">提交按钮一</button>
          <input type="submit" value="提交按钮二" />
          <button type="reset">重置按钮</button>
        </p>
      </form>
    </section>
  </body>
</html>
